<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .active {
        color: red;
    }
</style>
<body>
    <div id="app">
       <p>双向数据绑定</p>
       <input type="text" v-model="message">{{message}}
       <input type="text" :value="message2" @input="valueChange">{{message2}}
       <input type="text" :value="message3" @input="message3 = $event.target.value">{{message3}}
       <p>radio的使用（加了name属性或者绑定了才互斥）</p>
       <label for="male">
           <input type="radio" id="male" name="sex" value="男" v-model="sex">男
       </label>
       <label for="male">
           <input type="radio" id="female" name="sex" value="女" v-model="sex">女
        </label>
        <h4>您选择的性别是：{{sex}}</h4>

        <p>checkbox的使用（一个时true/false||多个时数组类型 hobbies: [],这个不互斥）</p>

        <p>v-model结合select使用（v-model要绑定到slelct上而不是option上 ）</p>
        <p>select 多选加multiple属性， 绑定的数据改成 fruits: []</p>

        <p>值绑定：先赋值再反向加载选择框</p>

        <p>双向绑定懒加载，函数防抖，失焦或会车时才同步</p>
        <input type="text" v-model.lazy="message4">{{message4}}

        <p>修饰符2： number</p>
        <input type="number" v-model.number="age">
        <h2>{{age}}--{{typeof age}}</h2>

        <p>修饰符3： trim</p>
        <input type="text" v-model.trim="name">{{name}}


    </div>
    <script src="../js/vue.js"></script>
    <script>
        // 小问题： 切换时input框里的数据不会消失  vue底层元素复用，为了性能
         const app = new Vue({
            el: '#app',    
            data: {    
                message: '你好',
                message2: '你也好',
                message3: '大家好',
                sex: '女',    // 给性别一个默认值，因为是双向绑定的，所以可以这么给
                message4: '你好呀',
                age: 0,
                name: ''
            },
            methods: {
                valueChange() {
                    this.message2 = event.target.value;
                }
            }
        })
    </script>
</body>
</html>